<script setup lang="ts">
import { onMounted, watch } from 'vue';
import { useSettingsStore } from '@/stores/settings';
import { storeToRefs } from 'pinia';
import debounce from 'lodash.debounce';

const settingsStore = useSettingsStore();
const { backgroundColor, fontColor, blurIntensity, darkMode, backgroundImage, cardBlurIntensity, backgroundColorOpacity, siteTitle, faviconUrl } = storeToRefs(settingsStore);

onMounted(() => {
  settingsStore.fetchSettings();
});

// 使用防抖来避免过于频繁地调用 API
const updateSettingsDebounced = debounce((newSettings) => {
  settingsStore.updateSettings(newSettings);
}, 300);

// Watch for individual changes to update the backend, but not darkMode itself
watch(
  [backgroundColor, fontColor, blurIntensity, backgroundImage, cardBlurIntensity, backgroundColorOpacity, siteTitle, faviconUrl],
  () => {
    const newSettings = {
      backgroundColor: backgroundColor.value,
      fontColor: fontColor.value,
      blurIntensity: blurIntensity.value,
      backgroundImage: backgroundImage.value,
      cardBlurIntensity: cardBlurIntensity.value,
      backgroundColorOpacity: backgroundColorOpacity.value,
      siteTitle: siteTitle.value,
      faviconUrl: faviconUrl.value,
    };
    updateSettingsDebounced(newSettings);
  }
);

const toggleDarkMode = () => {
  const isDark = !darkMode.value;
  const newSettings = {
    darkMode: isDark,
    // Set default bg and font color on toggle
    backgroundColor: isDark ? '#000000' : '#f0f2f5',
    fontColor: isDark ? '#e0e0e0' : '#333333',
  };
  // Directly update the settings, no debounce needed for a direct action
  settingsStore.updateSettings(newSettings);
};

</script>

<template>
  <div class="settings-view">
    <h1>站点设置</h1>
    <div class="settings-grid">
      <div class="setting-card">
        <label for="bg-color">背景滤镜颜色</label>
        <input type="color" id="bg-color" v-model="backgroundColor" />
      </div>
      <div class="setting-card">
        <label for="bg-opacity">背景滤镜不透明度</label>
        <input type="range" id="bg-opacity" min="0" max="1" step="0.05" v-model.number="backgroundColorOpacity" />
        <span>{{ Math.round(backgroundColorOpacity * 100) }}%</span>
      </div>
      <div class="setting-card">
        <label for="font-color">字体颜色</label>
        <input type="color" id="font-color" v-model="fontColor" />
      </div>
      <div class="setting-card">
        <label for="blur-intensity">背景模糊度 (px)</label>
        <input type="range" id="blur-intensity" min="0" max="20" v-model.number="blurIntensity" />
        <span>{{ blurIntensity }}px</span>
      </div>
      <div class="setting-card">
        <label for="dark-mode">深色模式</label>
        <label class="switch">
          <input type="checkbox" id="dark-mode" :checked="darkMode" @change="toggleDarkMode">
          <span class="slider round"></span>
        </label>
      </div>
      <div class="setting-card">
        <label for="card-blur-intensity">文章卡片模糊度 (px)</label>
        <input type="range" id="card-blur-intensity" min="0" max="20" v-model.number="cardBlurIntensity" />
        <span>{{ cardBlurIntensity }}px</span>
      </div>
      <div class="setting-card full-width">
        <label for="site-title">网站标题</label>
        <input type="text" id="site-title" v-model="siteTitle" placeholder="例如：我的个人博客" />
      </div>
      <div class="setting-card full-width">
        <label for="favicon-url">网站图标 URL</label>
        <input type="text" id="favicon-url" v-model="faviconUrl" placeholder="粘贴来自外部图床的图标链接" />
      </div>
      <div class="setting-card full-width">
        <label for="bg-image-url">背景图片 URL</label>
        <input type="text" id="bg-image-url" v-model="backgroundImage" placeholder="粘贴来自外部图床的图片链接" />
        <button v-if="backgroundImage" @click="backgroundImage = ''" class="remove-btn">移除背景图片</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}
.setting-card {
  background-color: var(--color-background-soft);
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  border: 1px solid var(--color-border);
}
.setting-card.full-width {
  grid-column: 1 / -1;
}
label {
  display: block;
  margin-bottom: 1rem;
  font-weight: bold;
}
input[type="color"] {
  width: 100%;
  height: 40px;
  border: 1px solid #ccc;
  padding: 0;
  cursor: pointer;
}
input[type="range"] {
  width: calc(100% - 40px);
  vertical-align: middle;
}
input[type="text"] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background-color: var(--color-background);
    color: var(--color-text);
}
.setting-card span {
  vertical-align: middle;
  margin-left: 1rem;
}

/* Toggle Switch for Dark Mode */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
}
input:checked + .slider {
  background-color: #2196F3;
}
input:checked + .slider:before {
  transform: translateX(26px);
}
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}
.remove-btn {
    margin-top: 1rem;
    background-color: #e74c3c;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
}
</style>